<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('执行器主页面')"/>
    <meta charset="utf-8">
    <title>SQL执行区</title>

    <link th:href="@{/easyui/themes/default/easyui.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/easyui/themes/icon.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/easyui/demo/demo.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/selfcss/mainframe.css}" rel="stylesheet" type="text/css"/>
    <style>
        .easyui-layout .tabs-container .panel-body {
            background: #fff;
            border: 1px solid #e7eaec;
            border-radius: 2px;
            padding: 0 !important;
            position: relative;
        }

        .easyui-layout .pagination {
            display: inline-block;
            padding-left: 0;
            margin: 5px 0 !important;
            border-radius: 4px;
        }


    </style>

    <title>欢迎使用tmd</title>
</head>
<body>
<div id="mainLayout" class="easyui-layout" data-options="fit: true">
    <div data-options="region:'west',split:true,title:'数据库选择'" style="width:300px;padding:0;">
        <div id="eastLayout" class="easyui-layout" data-options="fit: true">
            <div data-options="region: 'north', split: false, border: false" style="height: 60px;">
                <select id="databaseSelect" class="easyui-combobox" style="width:100%;"
                        data-options="panelHeight:'auto',prompt:'请选择数据库'">
                </select>
                <form id="databaseForm">
                    <input name="databaseId" id="databaseId" type="hidden"/>
                    <input name="tableName" id="tableNameInput" type="text" onchange="getTableList()"
                           style="width:100%; "/>
                </form>
            </div>
            <div data-options="region: 'center', border: false, title: '数据库', iconCls: 'icon-diy-database1'">
                <button type="button" class="btn btn-box-tool" id="databaseRefresh" title="刷新数据库"><i class="fa fa-refresh"></i></button>
                <table id="databaseInfo" style="width:100%;height:100%"></table>
            </div>
        </div>
    </div>
    <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:5px;">
        右边区域内容请等待
    </div>
    <div data-options="region:'center'" id="tt" class="easyui-tabs" style="overflow: hidden;" fit=“true”>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/easyui/jquery.easyui.min.js}" type="text/javascript"></script>
<script th:src="@{/fly/fly.js}" type="text/javascript"></script>
<script th:src="@{/selfjs/FlyRequest.js}" type="text/javascript"></script>
<script th:src="@{/commonjs/aes.js}" type="text/javascript"></script>
<script th:src="@{/commonjs/AesUtil.js}" type="text/javascript"></script>
<script th:src="@{/commonjs/Barrett.js}" type="text/javascript"></script>
<script th:src="@{/commonjs/BigInt.js}" type="text/javascript"></script>
<script th:src="@{/commonjs/pbkdf2.js}" type="text/javascript"></script>
<script th:src="@{/commonjs/RSA.js}" type="text/javascript"></script>
<script th:src="@{/commonjs/SHA.js}" type="text/javascript"></script>

<script th:inline="javascript">
    var prefix = ctx + "datamonitor/table";
    var excuteAndShowPrefix = ctx + "datamonitor/excuteAndShow";
    var myUserDatabasePrefix = ctx + "datamonitor/myUserDatabase";
    $(function () {
        getDataBaseList();

        $('#tt').tabs('add', {
            title: '运行及展示',
            content: '<iframe src="' + excuteAndShowPrefix + '" name="WORKINGFRAME" scrolling="no" style="overflow:auto;padding:0px;" width="100%" height = "99.5%" frameborder = "0" / > ',
            closable: false,
            iconCls: 'icon-diy-dashboard1'
        });

        $('#tableNameInput').tooltip({
            position: 'right',
            content: '<span style="color:#fff">This is the tooltip message.</span>',
            onShow: function () {
                $(this).tooltip('tip').css({
                    backgroundColor: '#666',
                    borderColor: '#666',
                });
            }
        });
        //列出表格
        $('#databaseInfo').treegrid({
            idField: 'id',
            treeField: 'tableName',
            columns: [
                [
                    {title: '详情', field: 'tableName', width: 270, formatter: formatTableName}
                ]
            ],
            onDblClickCell: function (field, row) {
                var databaseId = $("#databaseSelect").combobox("getValue");
                if (row.tableName == '库') {
                    return;
                }
                $('#tt').tabs('close', row.tableName);
                $('#tt').tabs('add', {
                    title: row.tableName,
                    content: '<iframe src="' + prefix + '/tablePage?databaseId=' + databaseId + '&tableName=' + row.tableName + '" name="WORKINGFRAME" scrolling="no" style="overflow:auto;padding:0px" width="100%" height="100%" frameborder="0"/>',
                    closable: true,
                    iconCls: 'icon-diy-table1'
                });
            }
        });

        $("[id='tableNameInput']").textbox({
            onChange: function () {
                getTableList()
            }
        });
    });

    $('#databaseSelect').combobox({
        onChange: function (newValue, oldValue) {
            $("#databaseId").val(newValue)
            getTableList()
        }
    });

    function formatTableName(val, row) {
        var id = "tableName_" + row.tableName;
        //var html = '<span id="'+ id +'" data-toggle="tooltip" data-placement="top" title="' + row.tableComment +'"   style="color:black;font-size:5px">' + row.name + '</span>'
        var html = '<span id="' + id + '" data-toggle="tooltip" data-placement="top" title="' + row.tableComment + '"   style="color:black;font-size:5px">' + row.name + '</span>'
        return html;
        //return '<a href="#" title="This is the tooltip message." className="easyui-tooltip">Hover me</a>';
    }

    $('#databaseRefresh').click(function() {
        getTableList()
    });



    function getDataBaseList() {
        var config = {
            url: myUserDatabasePrefix + "/list",
            type: "post",
            dataType: "json",
            beforeSend: function () {
                $.modal.loading("正在查询中，请稍候...");
                $.modal.disable();
            },
            success: function (result) {
                if (result.code == 0) {
                    $('#databaseSelect').combobox({
                        data: result.rows
                        , valueField: 'databaseId'
                        , textField: 'databaseName'
                    });
                } else if (result.code == 301) {
                    $.modal.alertWarning(result.msg);
                } else {
                    $.modal.alertError(result.msg);
                }
                $.modal.closeLoading();
            }
        };
        $.ajax(config)
    }


    function getTableList() {
        var formData = $('#databaseForm').serialize();
        var config = {
            url: prefix + "/list",
            type: "post",
            dataType: "json",
            data: formData,
            beforeSend: function () {
                $.modal.loading("正在查询中，请稍候...");
                $.modal.disable();
            },
            success: function (result) {
                if (result.code == 0) {
                    $('#databaseInfo').treegrid('loadData', result.data);
                } else if (result.code == 301) {
                    $.modal.alertWarning(result.msg);
                } else {
                    $.modal.alertError(result.msg);
                }
                $.modal.closeLoading();
            }
        };
        $.ajax(config)
    }
</script>
</body>
</html>